<template>
  <div class="modify-wrap">
    <div class="ms-title">修改密码</div>
    <div>
      <el-form class="ms-modify" :model="modifyForm" ref="modifyForm" :rules="rules" label-width="90px" label-position="right">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model="modifyForm.oldPwd" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="modifyForm.newPwd" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="modifyForm.confirmPwd" show-password clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="modify('modifyForm')">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModifyPassword',
  data () {
    let checkConfirmPwd = (rule, value, callback) => {
      if (value !== this.modifyForm.newPwd) {
        callback(new Error('确认密码和密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      modifyForm: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      rules: {
        oldPwd: [
          {required: true, message: '旧密码不能为空', trigger: 'blur'}
        ],
        newPwd: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        confirmPwd: [
          {required: true, message: '确认密码不能为空', trigger: 'blur'},
          {validator: checkConfirmPwd, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    modify (modifyForm) {
      this.$refs[modifyForm].validate((valid) => {
        if (valid) {
          for (let i of this.modifyForm.oldPwd) {
            if (i === ' ') {
              this.$message.error(" 旧密码不能包含空格！")
              return
            }
          }
          for (let i of this.modifyForm.newPwd) {
            if (i === ' ') {
              this.$message.error(" 新密码不能包含空格！")
              return
            }
          }
          this.$request.post('/user/updatepwd', {
            "oldPassword": this.modifyForm.oldPwd,
            "newPassword": this.modifyForm.newPwd
          }).then((result) => {
            if (result.code === 200 && result.data === 1) {
                this.modifyForm.oldPwd = ''
                this.modifyForm.newPwd = ''
                this.modifyForm.confirmPwd = ''
              this.$message.success('修改密码成功！')
            } else {
              this.$message.error(result.msg)
            }
          })
        } else {
          this.$message.error('数据不合法！')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.modify-wrap {
  justify-content: center;
  align-items:center;
}
.ms-title {
  width: 100%;
  padding-top: 30px;
  font-size: 30px;
}

.ms-modify {
  margin-top: 30px;
  padding: 50px;
  width: 350px;
  height: 240px;
  border: 1px solid;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;

}
</style>
